<template>
  <a-modal
    :title="fullScreenTitle"
    :visible="visible"
    :confirm-loading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    :width="width"
    :class="{ myFullScreen: fullScreen }"
  >
    <a-form-model ref="form" :model="form" :rules="validatorRules">
      <a-row>
        <a-col :span="24">
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="分类字段" prop="typeField">
            <a-tree-select
              show-search
              style="width: 100%"
              v-model="form.typeField"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="Please select"
              allow-clear
              tree-default-expand-all
              :treeData="reportsOptions"
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body
                }
              "
            >
            </a-tree-select>
          </a-form-model-item>
        </a-col>
        <a-col :span="24">
          <a-form-model-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="字典名称" prop="codeValue">
            <a-tree-select
              show-search
              style="width: 100%"
              v-model="form.codeValue"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              placeholder="Please select"
              allow-clear
              tree-default-expand-all
              :treeData="dictItem"
              :getPopupContainer="
                (triggerNode) => {
                  return triggerNode.parentNode || document.body
                }
              "
            >
            </a-tree-select>
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import FullScreenTitle from '@/components/LIbb/FullScreenTitle'
import { queryFieldsByReportCode, getDictItem, getTypeAuth } from '@/api/api'

export default {
  name: 'LlbbReportFormsDicForm',
  components: { FullScreenTitle },
  props: {
    //表单禁用
    disabled: {
      type: Boolean,
      default: false,
      required: false,
    },
    visible: {
      type: Boolean,
      default: false,
      required: false,
    },
    detail: {
      type: Object,
      default: false,
      required: false,
    },
    confirmLoading: {
      type: Boolean,
      default: false,
      required: false,
    },
  },
  data() {
    return {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 19 },
      },
      validatorRules: {
        typeField: [{ required: true, message: '请选择分类字段!' }],
        codeValue: [{ required: true, message: '请选择字典名称!' }],
      },
      reportsOptions: [],
      form: {
        typeField: '',
        codeValue: '',
      },
      rulesList: {},
      dictItem: [],
      width: 600,
      fullScreen: false,
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  mounted() {
    this.queryDictItem()
  },
  watch: {
    detail(newValue, oldValue) {
      if (newValue.reportTabName) {
        this.queryTypeAuth(newValue.reportTabName)
        this.initReportList2(newValue.reportTabName)
      }
    },
  },
  methods: {
    fullScreenTitle() {
      return (
        <full-screen-title
          title="分区分类配置"
          fullCoderEdit={this.fullCoderEdit}
          fullScreen={this.fullScreen}
        ></full-screen-title>
      )
    },
    fullCoderEdit() {
      this.width = this.fullScreen ? 600 : '100%'
      this.fullScreen = !this.fullScreen
    },
    queryTypeAuth(reportCode) {
      getTypeAuth({ reportCode }).then((res) => {
        if (res.code === 200) {
          this.form = res.result || {}
        } else {
          this.$message.warning('服务器出错')
        }
      })
    },

    //初始化字典
    queryDictItem() {
      getDictItem().then((res) => {
        if (res.code === 200) {
          this.dictItem = res.result.map((item, index, arr) => {
            let c = { label: item.name, value: item.code }
            return c
          })
        }
      })
    },
    //初始化字段
    initReportList2(reportCode) {
      console.log('%c [ this.detail ]-131', 'font-size:13px; background:pink; color:#bf2c9f;', reportCode)
      queryFieldsByReportCode({ reportCode }).then((res) => {
        if (res.code === 200) {
          this.reportsOptions = res.result.map((item, index, arr) => {
            let c = { label: item.FIELDNAME, value: item.FIELDCODE }
            return c
          })
        }
      })
    },
    handleSubmit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          let typeFieldName = this.reportsOptions.filter((item) => item.value === this.form.typeField)[0].label
          this.$emit('ok', { ...this.form, reportCode: this.detail.reportTabName, typeFieldName })
        } else {
          return false
        }
      })
    },
    handleCancel() {
      this.fullScreen = false
      this.width = 600
      this.$emit('cancel')
    },
  },
}
</script>
<style lang="less" scoped>
.myFullScreen /deep/ .ant-modal {
  top: 0;
  padding-bottom: 0;
}
.myFullScreen /deep/ .ant-modal-content {
  height: 100vh;
}
</style>